<template>
    <el-table :data="userList" border stripe>
        <!-- 基本信息 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="头像">
            <template slot-scope="scope">
                <img :src="scope.row.avatar" class="user_avatar"/>
            </template>
        </el-table-column>
        <el-table-column prop="screenName" label="昵称"></el-table-column>
        <el-table-column prop="roleName" label="角色"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>

        <!-- 状态 -->
        <el-table-column label="状态">
            <template slot-scope="scope">
                <user-set-state :state="true" :userinfo="scope.row"/>
            </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="180px" class="btns">
            <template slot-scope="scope">
                <!-- 修改按钮 -->
                <user-edit-dialog :user-id="scope.row.id" @user-list="updateUserList"/>

                <!-- 删除按钮 -->
                <user-remove-dialog :user-id="scope.row.id" @user-list="updateUserList"/>

                <!-- 分配角色按钮 -->
                <user-set-role :role="scope.row" @user-list="updateUserList"/>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>

import UserSetState from "./UserSetState";
import UserEditDialog from "./UserEditDialog";
import UserRemoveDialog from "./UserRemoveDialog";
import UserSetRole from "./UserSetRole";

export default {
    name: "UserTable",
    components: {
        UserSetState,
        UserEditDialog,
        UserRemoveDialog,
        UserSetRole
    },
    props: {
        userList: {
            type: Array,
            default() {
                return []
            }
        },
        queryInfo: {
            type: Object,
            default() {
                return {
                    query: '',
                    pagenum: 1, // 当前页
                    pagesize: 2 // 每页显示多少条数据
                }
            }
        }
    },
    methods: {
        // 监听子组件发射的事件，获得最新的userList和total信息
        updateUserList() {
            this.$emit('user-list');
        }
    }
}
</script>

<style scoped>
.user_avatar {
    width: 40px;
    aspect-ratio: 1;
}
</style>
